<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- bootstrap-table样式文件 -->
    <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <!-- bootstrap-table的js文件 -->
    <script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
    <!-- bootstrap-table的语言包 -->
    <script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript">
        $(function () {
            initTable();
            initRoleTable();
        });
        //初始化表格
        function initTable() {
            $("#tab").bootstrapTable({
                //表格高度
                height: 560,
                // theadClasses: ".thead-dark",
                //本地的数据
                // data:[
                //     {"id":1001,"name":"tom","gender":"0"},
                //     {"id":1002,"name":"jerry","gender":"1"},
                //     {"id":1003,"name":"zhangsan","gender":"0"},
                //     {"id":1004,"name":"lisi","gender":"1"}
                // ],
                //远程访问地址
                url: "user/list",
                //请求方法
                method: "get",
                //异步提交时向后台提交的请求参数
                queryParams: function(params){
                    params["nickname"]=$("#nickname").val().trim();
                    params["status"]=$("#status").val();
                    return params;
                },
                //修改分页组件向后台提交数据
                queryParamsType: "",
                //开启分页
                pagination: true,
                //设置服务器分页
                sidePagination: "server",
                //每页条数
                pageSize: 10,
                //用户设置的每页条数列表
                pageList: [10,20,30,50],
                //上一页和下一页文本
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                //刷新按钮
                showRefresh: true,
                //点击选中
                clickToSelect: true,
                //单选
                singleSelect: false,
                //工具栏
                toolbar: "#toolbar",
                //表格中的列描述
                columns: [
                    {
                        //表格第一列为复选框
                        checkbox: true
                    },{
                        //表示json字符串中的属性名称
                        /*
                            "[{"id":1001,"name":"tom","gender":"0"},{"id":1002,"name":"jerry","gender":"1"}]"
                         */
                        field: "userid",
                        //隐藏列
                        visible: false
                    },{
                        //表头中的文本
                        field: "username",
                        //设置表头的对齐方式
                        title: "用户名",
                        halign: "center"
                    },{
                        field: "nickname",
                        title: "昵称",
                        halign: "center"
                    },{
                        field: "email",
                        title: "邮箱",
                        halign: "center"
                    },{
                        field: "mobie",
                        title: "手机",
                        halign: "center"
                    },{
                        field: "gender",
                        title: "性别",
                        halign: "center",
                        //列数据格式化 value表示列的数据，row表示当前行对应json对象
                        formatter: function (value,row) {
                            var gender = ["男性","女性","保密"];
                            return gender[value];
                        }
                    },{
                        field: "avatar",
                        title: "头像",
                        halign: "center"
                    },{
                        field: "password",
                        title: "密码",
                        halign: "center"
                    },{
                        field: "status",
                        title: "状态",
                        halign: "center",
                        formatter: function (value) {
                            var status = ["正常","停用"];
                            return status[value];
                        }
                    }
                ]
            });
        }
        function initRoleTable() {
            $("#role_tab").bootstrapTable({
                url : "role/list/all",
                method : "get",
                //点击行选中复选框
                clickToSelect: true,
                responseHandler: function(res) {
                    return res.data;
                },
                //表格中的列描述
                columns: [
                    {
                        checkbox: true
                    },{
                        field: "roleid",
                        visible: false
                    },{
                        field: "rolename",
                        title: "角色名称",
                        halign: "center"
                    },{
                        field: "rolecode",
                        title: "角色编码",
                        halign: "center"
                    },{
                        field: "sort",
                        title: "显示顺序",
                        halign: "center"
                    }
                ]
            });
        }
        function doInsert(){
            if(!flag){
                alert("用户名已存在");
                return;
            }
            $.post("user/add",{
                username : $("#in_username").val().trim(),
                nickname : $("#in_nickname").val().trim(),
                email : $("#in_email").val().trim(),
                mobie : $("#in_mobie").val().trim(),
                gender : $("#in_gender").val(),
                password : $("#in_password").val().trim(),
                creator : $("#in_creator").val(),
                remark : $("#in_remark").val().trim()
            },function (res) {
                if(res.status==200){
                    alert("新增成功");
                    $("#insert_win").modal("hide");
                    $("#tab").bootstrapTable("refresh");
                    $("#insert_form")[0].reset();
                }
            });
        }
        function doPreUpdate() {
            var rows = $("#tab").bootstrapTable("getSelections");
            if(rows.length==0){
                alert("请选中一条要修改的数据");
            }else if(rows.length>1){
                alert("只能修改一条数据");
            }else{
                $.get("user/get/"+rows[0].userid,null,function (res) {
                    $("#up_userid").val(res.data.userid);
                    $("#up_username").val(res.data.username);
                    $("#up_nickname").val(res.data.nickname);
                    $("#up_email").val(res.data.email);
                    $("#up_mobie").val(res.data.mobie);
                    $("#up_gender").val(res.data.gender);
                    $("#up_password").val(res.data.password);
                    $("#up_remark").val(res.data.remark);
                    $("#update_win").modal("show");
                });
            }
        }
        function doUpdate(){
            $.post("user/update",{
                userid : $("#up_userid").val(),
                // username : $("#up_username").val().trim(),
                nickname : $("#up_nickname").val().trim(),
                email : $("#up_email").val().trim(),
                mobie : $("#up_mobie").val().trim(),
                gender : $("#up_gender").val(),
                password : $("#up_password").val().trim(),
                updater : $("#up_updater").val(),
                remark : $("#up_remark").val().trim()
            },function (res) {
                if(res.status==200){
                    alert("修改成功");
                    $("#update_win").modal("hide");
                    $("#tab").bootstrapTable("refresh");
                    $("#update_form")[0].reset();
                }
            });
        }
        function doDelete() {
            var rows = $("#tab").bootstrapTable("getSelections");
            if(rows.length==0){
                alert("请选中一条要删除的数据");
            }else{
                if(!confirm("确定删除吗?")) return;
                var ids = [];
                $.each(rows, function () {
                    ids.push(this.userid);
                });
                alert(ids);
                $.get("user/removeBatch",{ids : ids},function (res) {
                    if(res.status==200){
                        alert("删除成功");
                        $("#tab").bootstrapTable("refresh");
                    }
                });
            }
        }
        //判断用户名是否可用
        var flag = false;
        function existsUsername() {
            var username = $("#in_username").val().trim();
            if(username==null || username==""){
                alert("用户名不能为空!");
                return;
            }
            $.get("user/exists/username",{username:username},function (res) {
                if(res.status==200){
                    $("#msg").html("用户名可用");
                    flag = true;
                }else{
                    $("#msg").html("用户名已存在");
                    flag = false;
                }
            })
        }

        //修改用户状态
        function changeStatus() {
            var rows = $("#tab").bootstrapTable("getSelections");
            if(rows.length==0){
                alert("请选中一条要切换状态的数据");
            }else if(rows.length>1){
                alert("只能操作一条数据");
            }else{
                $.post("user/update",{
                    userid : rows[0].userid,
                    status : rows[0].status==0?"1":"0"
                },function (res) {
                    if(res.status==200){
                        alert("状态切换成功");
                        $("#tab").bootstrapTable("refresh");
                    }
                });
            }
        }
        //打开设置角色窗体
        function preSetRole() {
            var rows = $("#tab").bootstrapTable("getSelections");
            if(rows.length==0){
                alert("请选择一条要设置角色的数据");
            }else if(rows.length>1){
                alert("只能为一条数据设置角色");
            }else{
                $.ajax({
                    url: "role/list/"+rows[0].userid,
                    type: "get",
                    success: function (res) {
                        if(res.status==200){
                            var roleIds = [];
                            $.each(res.data, function () {
                                roleIds.push(this.roleid);
                            });
                            $("#role_tab").bootstrapTable("uncheckAll");
                            $("#role_tab").bootstrapTable("checkBy",{field: "roleid",values: roleIds});
                            $("#role_win").modal("show");
                        }
                    }
                });
            }
        }
        //设置角色
        function setRole() {
            var user_row = $("#tab").bootstrapTable("getSelections");
            var role_row = $("#role_tab").bootstrapTable("getSelections");
            var roleIds = [];
            $.each(role_row, function () {
                roleIds.push(this.roleid);
            });
            $.ajax({
                url : "user/set/role",
                type : "post",
                data : {
                    userid : user_row[0].userid,
                    roleIds : roleIds
                },
                success : function (res) {
                    if(res.status==200){
                        alert("设置成功");
                        $("#role_win").modal("hide");
                        $("#tab").bootstrapTable("refresh");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <!--=======================路径导航=========================-->
    <ol class="breadcrumb">
        <li>主页</li>
        <li>系统管理</li>
        <li class="active">用户列表</li>
    </ol>
    <!--=======================路径导航.end=========================-->
    <!--=======================页面主体=========================-->
    <div class="panel-body">
        <form id="toolbar" class="form-inline">
            <div class="btn-group">
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#insert_win">新增</button>
                <button type="button" class="btn btn-success" onclick="doPreUpdate()">修改</button>
                <button type="button" class="btn btn-danger" onclick="doDelete()">删除</button>
                <button type="button" class="btn btn-primary" onclick="changeStatus()">切换状态</button>
                <button type="button" class="btn btn-info" onclick="preSetRole()">设置角色</button>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="nickname" placeholder="昵称">
            </div>
            <div class="form-group">
                <select id="status" class="form-control">
                    <option value="">--用户状态--</option>
                    <option value="0">正常</option>
                    <option value="1">停用</option>
                </select>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default" onclick="$('#tab').bootstrapTable('refresh')">搜索</button>
                <button type="button" class="btn btn-default" onclick="$('#toolbar')[0].reset();$('#tab').bootstrapTable('refresh');">清空</button>
            </div>
        </form>
        <table id="tab" class="table table-bordered table-hover table-striped"></table>
    </div>
    <!--=======================页面主体.end=========================-->
    <!--=======================新增窗体=========================-->
    <div id="insert_win" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">新增用户</h4>
                </div>
                <div class="modal-body">
                    <form id="insert_form">
                        <input type="hidden" id="in_creator" value="zhangsan">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">用&ensp;户&ensp;名</div>
                                <input type="text" id="in_username" class="form-control" onblur="existsUsername()">
                            </div>
                            <div id="msg" style="color: red;"></div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">昵&emsp;&emsp;称</div>
                                <input type="text" id="in_nickname" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">邮&emsp;&emsp;箱</div>
                                <input type="text" id="in_email" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">手&emsp;&emsp;机</div>
                                <input type="text" id="in_mobie" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">性&emsp;&emsp;别</div>
                                <select id="in_gender" class="form-control">
                                    <option value="0">男性</option>
                                    <option value="1">女性</option>
                                    <option value="2">保密</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">密&emsp;&emsp;码</div>
                                <input type="password" id="in_password" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">备&emsp;&emsp;注</div>
                                <input type="text" id="in_remark" class="form-control">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="doInsert()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--=======================新增窗体.end=========================-->
    <!--=======================修改窗体=========================-->
    <div id="update_win" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改用户</h4>
                </div>
                <div class="modal-body">
                    <form id="update_form">
                        <input type="hidden" id="up_userid">
                        <input type="hidden" id="up_updater" value="lisi">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">用&ensp;户&ensp;名</div>
                                <input type="text" id="up_username" class="form-control" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">昵&emsp;&emsp;称</div>
                                <input type="text" id="up_nickname" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">邮&emsp;&emsp;箱</div>
                                <input type="text" id="up_email" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">手&emsp;&emsp;机</div>
                                <input type="text" id="up_mobie" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">性&emsp;&emsp;别</div>
                                <select id="up_gender" class="form-control">
                                    <option value="0">男性</option>
                                    <option value="1">女性</option>
                                    <option value="2">保密</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">密&emsp;&emsp;码</div>
                                <input type="password" id="up_password" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">备&emsp;&emsp;注</div>
                                <input type="text" id="up_remark" class="form-control">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="doUpdate()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--=======================修改窗体.end=========================-->
    <!-- =================设置角色窗体====================== -->
    <div class="modal fade" id="role_win" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">设置角色</h4>
                </div>
                <div class="modal-body" style="height: 350px">
                    <table id="role_tab" class="table table-bordered table-hover table-striped table-condensed"></table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="setRole()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- =================设置角色窗体.end====================== -->
</body>
</html>
